<!--
 * @Author: jingzi 1163478123@qq.com
 * @Date: 2025-04-29 20:25:25
 * @LastEditors: jingzi 1163478123@qq.com
 * @LastEditTime: 2025-07-05 18:14:10
 * @Description: 设置页面
 * Copyright (c) 2025 by ${git_name}, All Rights Reserved.
-->
<template>
  <div class="container">
    <div class="site-filter">  
      <div class="site-filter-item">
        <input type="checkbox" v-model="showCode" @change="handleShowCodeChange" />
        <span>显示代码</span>
      </div>
      <div class="site-filter-item">
        <input type="checkbox" v-model="showOtherLink" @change="handleShowOtherLinkChange" />
        <span>显示其他链接</span>
      </div>
    </div>
    <h2 class="site-title">CJ各个站点(<small>按钮默认线上地址</small>)</h2>
    <ul class="site-list">
      <li v-for="site in siteList" :key="site.name">
        <div class="site-link-container">
          <a class="site-btn" :href="site.url" target="_blank">{{ site.name }}</a>
          <div class="site-test-text" v-if="showOtherLink">
            <a class="site-link" :href="site.urlTest" target="_blank">测试地址</a><br/>
            <a class="site-link" :href="site.urlCn" target="_blank">cn地址</a>
          </div>
        </div>
        <p class="site-code" v-if="showCode" target="_blank">
          代码
          <a class="site-code-text site-link" 
          v-for="codeItem in codeMap[site.codeKey]" 
          :href="codeItem.url" target="_blank">
          {{ codeItem.name }}
          </a>
        </p>
      </li>
    </ul>
    <h2 class="site-title">erp地址</h2>
    <ul class="site-list">
      <li v-for="site in erpSiteList" :key="site.name">
        <div class="site-link-container">
          <a class="site-btn" :href="site.url" target="_blank">{{ site.name }}</a>
          <span class="site-test-text" v-if="showOtherLink">
            <a class="site-link" :href="site.urlTest" target="_blank">测试地址</a>
          </span>
        </div>
        <p class="site-code" v-if="showCode" target="_blank">
          代码
          <a class="site-code-text site-link" 
          v-for="codeItem in codeMap[site.codeKey]" 
          :href="codeItem.url" target="_blank">
          {{ codeItem.name }}
          </a>
        </p>
      </li>
    </ul>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { siteList, erpSiteList, codeMap } from './config'
const showCode = ref(true)
const showOtherLink = ref(true)

const handleShowCodeChange = (event) => {
  const value = event.target.checked
  console.log('handleShowCodeChange', value)
  showCode.value = value
  chrome.storage.local.set({ showCode: value })
}
const handleShowOtherLinkChange = (event) => {
  const value = event.target.checked
  showOtherLink.value = value
  chrome.storage.local.set({ showOtherLink: value })
}
</script>

<style scoped>
.container {
  padding: 16px;
}
.site-menu{
  position: static;
  width: 200px;
  align-self: flex-start;
}
.site-title{
  margin-top: 16px;
}
.site-list{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100vw;
  list-style: none;
  margin-bottom: 20px;
}
.site-list li{
  width: max-content;
  margin: 0 8px;
  cursor: pointer;
}
.site-btn{
  margin-right: 10px;
  font-size: 18px;
  border: 1px solid #225d44;
  padding: 6px 8px;
  line-height: 20px;
  border-radius: 4px;
  box-shadow: 0 0 3px 0px #aaacaba1;
  color: #fff;
  text-decoration: none;
  background: #225d44;
  &:hover{
    text-decoration: none;
  }
}
.site-link-container{
  display: flex;
  align-items: center;
}
.site-link{
  color: #2f6709;
  &:hover{
    color: #053f08;
    text-decoration: underline;
  }
}
.site-code-text{
  margin-right: 4px;
}
</style> 